<template>
    <a-row>
        <a-col :span="24">
            <ml-table-pro :dataSource="dataSource" :columns="columns">
                <template #toolbar>
                    <a-space>
                        <a-button
                            @click="
                                () => {
                                    clickItem({});
                                    visible = true;
                                }
                            "
                        >
                            新建
                        </a-button>
                    </a-space>
                </template>
                <template #bodyCell="{ column, index, record, text }">
                    <slot
                        name="bodyCell"
                        v-bind="{
                            column,
                            index,
                            record,
                            text,
                            open: (val) => {
                                clickItem(record);
                                visible = val;
                            },
                        }"
                    >
                        <template v-if="column.key == 'action'">
                            <a-space>
                                <a-space>
                                    <a @click="visible = true"> 编辑 </a>
                                    <a @click="visible = true"> 删除 </a>
                                </a-space>
                            </a-space>
                        </template>
                    </slot>
                </template>
            </ml-table-pro>
        </a-col>

        <a-drawer v-model:visible="visible" :title="current.name" width="800">
            <slot name="editor" :form="form" :visible="visible"></slot>

            <template #footer style="text-align: right">
                <a-space>
                    <a-button
                        type="primary"
                        @click="
                            $emit('submit', form, () => {
                                visible = false;
                            })
                        "
                        >提交</a-button
                    >
                    <a-button>取消</a-button>
                </a-space>
            </template>
        </a-drawer>
    </a-row>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watchEffect } from "vue";
import { reloadApi } from "@/api/table/index";

type ComponentsType = {
    name?: string;
    count?: number;
};

export default defineComponent({
    emits: ["submit", "reload"],
    props: {
        dataSource: Array,
        columns: Array,
        url: String,
    },
    setup(props, { emit }) {
        const visible = ref(false);
        const current = ref<ComponentsType | null>({});
        const form = ref({});
        watchEffect(() => {
            form.value = Object.assign({}, current.value);
        });

        const clickItem = (row: ComponentsType) => {
            current.value = row;
        };

        const reload = async () => {
            if (!props.url) {
                console.error("url is undefind");
                return;
            }
            await reloadApi(props.url, form.value).then((res) => {
                emit("reload", res);
                return res;
            });
        };

        onMounted(() => {
            reload();
        });

        return {
            visible,

            current,
            clickItem,
            form,
            reload,
        };
    },
});
</script>
